<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app14">
			<input placeholder="Add a text"  v-on:keyup.enter="addNewTodo" v-model="newTodoText" />
			<ul>
	    <li
	      is="todo-item"
	      v-for="(todo, index) in todos"
	      v-bind:title="todo"
	      v-on:remove="todos.splice(index, 1)"
	    ></li>
	    </ul>
		</div>
		
	</body>
	<script>
		Vue.component('todo-item', {
			  template: '\
			    <li>\
			      {{ title }}\
			      <button v-on:click="$emit(\'remove\')">X</button>\
			    </li>\
			  ',
			  props: ['title']
		})
		var app14=new Vue({
		  el: '#app14',
		  data: {
		  	newTodoText:'',
		    todos:[
			    "杨术强",
		    	"25",
		    	"男"
		    ]
		  },
	   	methods: {
		    addNewTodo: function () {
		      this.todos.push(this.newTodoText)
		      this.newTodoText = ''
		    }
  		}
		
	})
	</script>
</html>
